<template>
  <div ref="container" class="search-wrapper">
    <el-input v-model="searchText" placeholder="请输入搜索内容" clearable>
      <template #suffix>
        <el-icon>
          <Search />
        </el-icon>
      </template>
    </el-input>
    <el-input v-model="searchText" placeholder="请输入搜索内容" @focus="showDropdown = true" clearable>
      <template #suffix>
        <el-icon>
          <Search />
        </el-icon>
      </template>
    </el-input>

    <div v-if="showDropdown" class="dropdown-panel">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="Tab A" name="a">
          <div class="tab-content">这是内容 A</div>
        </el-tab-pane>
        <el-tab-pane label="Tab B" name="b">
          <div class="tab-content">这是内容 B</div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { Search } from '@element-plus/icons-vue'

const searchText = ref('')
const showDropdown = ref(false)
const activeTab = ref('a')
const container = ref(null)

function handleClickOutside(event) {
  if (container.value && !container.value.contains(event.target)) {
    showDropdown.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.search-wrapper {
  position: relative;
  width: 300px;
}

.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  z-index: 1000;
  margin-top: 4px;
  border-radius: 4px;
}

.tab-content {
  padding: 10px;
  font-size: 14px;
  color: #606266;
}
</style>
